CSS Color — PBA Institute CSS Tutorial
Chapter 04 · CSS Tutorial Series
10 min read Beginner

CSS Color

CSS Color is one of the most fundamental design properties. It lets you control the color of text, backgrounds, borders, shadows, and almost every visual element on a web page. CSS supports many color formats — named colors, HEX, RGB, RGBA, HSL, and HSLA.

Why Color Matters

  • Branding: Color reinforces brand identity and creates emotional connection with users.
  • Hierarchy: Color guides users to the most important elements first.
  • Readability: Proper contrast between text and background improves accessibility.
  • Engagement: A balanced color palette improves user retention and engagement.

Ways to Define Color in CSS

🅰️

Color Names

Use English names like red, blue, tomato.

#️⃣

HEX Codes

6-digit hex like #FF5733 — RR GG BB format.

🎨

RGB

rgb(255, 87, 51) — red, green, blue from 0 to 255.

💧

RGBA

Like RGB but with alpha (transparency): rgba(255,87,51,0.5).

🌈

HSL

Hue, Saturation, Lightness — hsl(0, 100%, 50%).

🌫️

HSLA

HSL with transparency: hsla(0,100%,50%,0.5).

CSS Color Syntax

Basic Color Syntax 
selector {
    color: red;                       /* Named */
    background-color: #4CAF50;        /* HEX */
    border-color: rgb(255, 0, 0);     /* RGB */
    box-shadow: 0 0 5px rgba(0,0,0,0.3); /* RGBA */
}

1. Keywords

CSS provides predefined color names called keyword colors. These color names can be used directly inside CSS properties like color and background-color. Some common keyword colors are red, blue, green, yellow, tomato, black, and white.

Keyword Color Example 
<!DOCTYPE html>
<html>

<head>
    <title>CSS Keyword Colors</title>

    <style>

        body{
            background-color: LavenderBlush;
        }

        h1{
            color: tomato;
        }

        p{
            color: blue;
        }

    </style>
</head>

<body>

    <h1 align="center">
        CSS
    </h1>

    <p align="center">
        Welcome to PBA INSTITUTE
    </p>

</body>

</html>
Output Tomato colored heading and blue paragraph with LavenderBlush background.

CSS

Welcome to PBA INSTITUTE

Code Explanation

  • background-color: Sets the background color of the webpage.
  • LavenderBlush: A predefined CSS keyword color used as page background.
  • color: Changes the text color of elements.
  • tomato: A keyword color applied to the heading.
  • blue: A keyword color applied to the paragraph text.
  • align="center": Centers the heading and paragraph text.

2. Hexadecimal Notation

HEX colors use a # followed by hexadecimal values representing RGB colors.

HEX Color Example 
<!DOCTYPE html>
<html>
<head>

<style>
body{
    background-color: #A4A6A6;
}

h1{
    color: #ff0000;
}

p{
    color: #306E41;
}
</style>

</head>

<body>

    <h1 align="center">CSS</h1>

    <p align="center">
        Welcome to PBA INSTITUTE
    </p>

</body>
</html>
Output Red heading and green paragraph using HEX color values.
HEX Color Output

3. RGB Functional Notation

RGB defines colors using Red, Green, and Blue values ranging from 0 to 255.

RGB Color Example 
<!DOCTYPE html>
<html>
<head>

<style>
body{
    background-color: rgb(163, 228, 215);
}

h1{
    color: rgb(231, 76, 60);
}

p{
    color: rgb(46, 79, 116);
}
</style>

</head>

<body>

    <h1 align="center">CSS</h1>

    <p align="center">
        Welcome to PBA INSTITUTE
    </p>

</body>
</html>
Output Colors created using RGB values for precise color customization.
RGB Color Output

4. RGBA Functional Notation

RGBA works like RGB but includes an alpha channel for transparency.

RGBA Color Example 
<!DOCTYPE html>
<html>
<head>

<style>
body{
    background-color: rgba(116, 137, 181, 0.31);
}

h1{
    color: rgba(255, 99, 71, 1);
}

p{
    color: rgba(29, 54, 106, 0.83);
}
</style>

</head>

<body>

    <h1 align="center">CSS</h1>

    <p align="center">
        Welcome to PBA INSTITUTE
    </p>

</body>
</html>
Output Semi-transparent background and text colors using RGBA.
RGBA Color Output

5. HSL Functional Notation

HSL stands for Hue, Saturation, and Lightness. It specifies colors using the Hue-Saturation-Lightness color model. hsl(hue, saturation%, lightness%), where hue is an angle from 0 to 360 degrees, and saturation and lightness are percentages.

HSL Color Example 
<!DOCTYPE html>
<html>

<head>
    <title>HSL Colors</title>

<style>

h1{
    color: hsl(210, 100%, 50%);
}

p{
    color: hsl(65, 100%, 50%);
}

</style>

</head>

<body>

    <h1>CSS</h1>

    <p>
        Welcome to PBA INSTITUTE
    </p>

</body>

</html>
Output Blue heading and yellow-green paragraph using HSL color values.
HSL Color Output

6. HSLA Functional Notation

HSLA is similar to HSL, but includes an alpha channel for transparency. hsla(hue, saturation%, lightness%, alpha), where alpha is a number between 0 (transparent) and 1 (opaque).

HSLA Color Example 
<!DOCTYPE html>
<html>

<head>
    <title>HSLA Colors</title>

<style>

h1{
    color: hsla(240, 100%, 50%, 0.7);
}

p{
    color: hsla(60, 100%, 50%, 0.7);
}

</style>

</head>

<body>

    <h1>CSS</h1>

    <p>
        Welcome to PBA INSTITUTE
    </p>

</body>

</html>
Output Semi-transparent blue heading and yellow paragraph using HSLA values.

CSS

Welcome to PBA INSTITUTE

Conclusion

CSS color improves webpage appearance and user experience. Using HSL and HSLA color models helps developers create modern, attractive, and transparent color effects efficiently.

Common Color Formats

Format Example Range / Notes
Named tomato ~140 standard color names
HEX #FF6347 00 to FF for each RGB channel
RGB rgb(255,99,71) 0 to 255 for each channel
RGBA rgba(255,99,71,0.5) Alpha: 0 (transparent) to 1 (opaque)
HSL hsl(9,100%,64%) Hue 0-360, S/L in %
HSLA hsla(9,100%,64%,0.6) HSL with transparency

Where to Apply Color

Text

Use color to set text color.

Background

Use background-color for the element background.

Borders

Use border-color for borders.

Shadows

Use box-shadow and text-shadow for shadow color.

Common Color Properties

Text
color
Background
background-color background
Borders
border-color outline-color
Effects
box-shadow text-shadow caret-color

Important Notes

  • Contrast matters: Always keep enough contrast between text and background for readability.
  • Prefer HEX or RGB: They are the most widely used in design tools and code.
  • Use RGBA for transparency: RGBA lets you create soft overlays and translucent effects.
  • Test on real devices: Colors can look different across monitors and phones.

Real-World Use Cases

Branding

Use brand HEX colors consistently across the website.

Highlighting

Use bright colors to draw attention to CTAs and alerts.

Dark Mode

Use RGBA and HSL for adaptive light/dark themes.

Practice Questions

  • Write CSS to set the text color of a paragraph to #FF5733.
  • Use RGBA to make a semi-transparent red background.
  • Convert the HEX #1a73e8 to its RGB equivalent.
  • Style a button to have a green background and white text.
  • Apply an HSL color value to a heading.

Frequently Asked Questions

  • What is the difference between RGB and HEX: Both define the same RGB color — HEX is a shorthand using hexadecimal digits, while RGB uses decimal numbers.
  • How do I add transparency to a color: Use RGBA or HSLA with an alpha value between 0 (transparent) and 1 (fully opaque).
  • Can I use named colors in CSS: Yes, CSS supports about 140 standard named colors like red, tomato, royalblue, and slategray.
  • Which color format is best: HEX and RGB are most common; RGBA and HSLA are best when you need transparency.

Conclusion

CSS colors bring life to web pages. Whether you use named colors, HEX, RGB, RGBA, HSL, or HSLA, choosing the right format depends on the design need. Always keep contrast and branding consistent for a professional look.

CSS All Topics

Introduction Selectors Style Sheet Insertion CSS Color CSS Backgrounds CSS Border CSS Margin CSS Table CSS Text Fonts CSS Links Animation Button Transition Cursor Type Navbar Layout Login Page Image Slider

Continue Learning

Previous

Go to Style Sheet Insertion Chapter

Next

Go to CSS Backgrounds Chapter